<!--
 * @Date: 2024-10-11 14:27:37
 * @LastEditors: Lcx l1556461835@163.com
 * @LastEditTime: 2024-11-08 09:52:25
 * @FilePath: \frontEnd\pages\checkYe\index.vue
 * @Description: 外委厂商页面
-->
<template>
  <div>
    <page-title title="待处理评审/处理/核定外委" home-path="/sale/home" back-path="/sale/home"></page-title>
    <div class="pageMain">
      <div class="pageMain-title">
        <span>核定外委业务</span>
      </div>
      <div class="pageMain-body">
        <div class="checkForm">
          <el-form ref="ruleForm" :model="checkInfo" :rules="rules" label-width="140px" >
            <el-form-item label="外委厂商" prop="outsourcingName">
              <el-select v-model="checkInfo.outsourcingName" filterable clearable allow-create
              default-first-option placeholder="请选择外委厂商" @change="handleChange">
                <el-option v-for="(item,index) in selectOptions" :key="index" :label="item.outsourcingName" :value="item.outsourcingName"/>
              </el-select>
            </el-form-item>
            <el-form-item label="外委厂商联系方式" prop="outsourcingPhone">
              <el-input v-model.number.trim="checkInfo.outsourcingPhone" placeholder="请输入外委厂商联系方式"></el-input>
            </el-form-item>
            <el-form-item label="预计外委价格" prop="outsourcingPrice">
              <el-input v-model.number="checkInfo.outsourcingPrice" placeholder="请输入价格金额" style="width: 240px"></el-input>
              <span style="margin-left: 20px">(人民币：万元)</span>
            </el-form-item>
            <el-form-item style="text-align:right;margin-top: 20px">
              <el-button type="primary" size="small" @click="saveInfo('ruleForm')">保存</el-button>
              <el-button type="success" size="small" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle.vue";
import {
  GET_OUT_SOURCING,
  SAVE_OUT_SOURCING,
  SUBMIT_OUT_SOURCING
} from "@/lib/Api.js";
import { post, get } from "@/lib/Util.js";
export default {
  components: {
    PageTitle
  },
  data() {
    return {
      checkInfo: {
        outsourcingName: "",
        outsourcingPhone: "",
        outsourcingPrice: "",
        outsourcingId: "", // 外资厂商id
        contractInfoId: "" // 待评审订单id
      },
      rules: {},
      selectOptions: []
    };
  },
  mounted() {
    this.getOutSoucring();
    this.checkInfo.contractInfoId = this.$route.params.id;
    if (!this.checkInfo.contractInfoId) {
      this.$router.push({ path: "/sale/toBehandle" });
    }
  },
  methods: {
    async getOutSoucring() {
      let res = await post(GET_OUT_SOURCING, {
        outsourcingName: "",
        outsourcingPhone: ""
      });
      this.selectOptions = res.data;
    },
    handleChange(val) {
      if (val) {
        let obj = this.selectOptions.find(item => {
          return item.outsourcingName == val;
        });
        if (obj) {
          this.checkInfo.outsourcingPhone = obj.outsourcingPhone;
          this.checkInfo.outsourcingId = obj.id;
        } else {
          this.checkInfo.outsourcingPhone = "";
          this.checkInfo.outsourcingId = "";
        }
      } else {
        this.checkInfo.outsourcingPhone = "";
        this.checkInfo.outsourcingId = "";
      }
    },
    async saveInfo() {
      let res = await post(SAVE_OUT_SOURCING, this.checkInfo);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
      }
    },
    async submitForm() {
      let res = await post(SUBMIT_OUT_SOURCING, this.checkInfo);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.checkForm {
  width: 500px;
  margin: auto;
  padding: 40px 0px 0px 0px;
  .el-form-item {
    margin-bottom: 30px;
  }
}
</style>
